<!--
 * @Author: Bennty
 * @Date: 2024-12-16 10:44:13
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-16 14:39:34
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="订单详情" width="40%" @close="handleClose">
        <div id="pdf-content" ref="printArea">
            <table class="order-table">
                <colgroup>
                    <col style="width: 16.7%;">
                    <col style="width: 16.7%;">
                    <col style="width: 16.7%;">
                    <col style="width: 16.7%;">
                    <col style="width: 16.7%;">
                    <col style="width: 16.7%;">
                </colgroup>
                <caption>
                    <h3>电商部餐具成品组装单</h3>
                </caption>
                <tr>
                    <td colspan="6">
                        设计师上传图片
                    </td>
                </tr>
                <tr>
                    <td>制单日期：</td>
                    <td colspan="2">{{ props.orderDetails.createTime }}</td>
                    <td>交货日期：</td>
                    <td colspan="2">{{ props.orderDetails.deliveryDate }}</td>
                </tr>
                <tr>
                    <td>客户名称：</td>
                    <td colspan="2">{{ props.customers?.filter((item:any)=>item.id == props.orderDetails.customerId)[0].customerName }}</td>
                    <td>生产数量：</td>
                    <td colspan="2">{{ props.orderDetails.number }}</td>
                </tr>
                <tr>
                    <td>子公司：</td>
                    <td colspan="2">A公司</td>
                    <td>产品款式：</td>
                    <td colspan="2">{{ customization_indent_tableware?.filter((item:any)=>props.orderDetails.productStyle == item.value)[0]?.label }}</td>
                </tr>
                <tr>
                    <td colspan="6">
                        <el-image :src="props.orderDetails.codeUrl"></el-image>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">配件信息</td>
                    <td>单品数量</td>
                    <td>需求总数</td>
                </tr>
                <tr v-for="(item,index) in props.orderDetails.dataList" :key="index">
                    <td>{{item.productCategoriesType}}</td>
                    <td>{{ item.productSubcategoryType }}</td>
                    <td colspan="2">{{ item.specsDetail }}</td>
                    <td>{{ item.number }}</td>
                    <td>{{ item.needNumber }}</td>
                </tr>
                <tr>
                    <td>备注：</td>
                    <td colspan="5">{{ props.orderDetails.remark }}</td>
                </tr>
                <tr>
                    <td>工费：</td>
                    <td colspan="5">
                        <span class="laborCost">组装工费：{{ props.orderDetails.assemblePrice }}</span>
                        <span class="laborCost">包装工费：{{ props.orderDetails.packingPrice }}</span>
                    </td>
                </tr>
                <tr>
                    <td>操作详情：</td>
                    <td colspan="5"></td>
                </tr>
            </table>
            <el-row style="width: 90%; margin-top: 15px">
                <el-col :span="12">
                    <span>打印次数：</span>
                    <span class="item-info">{{ props.orderDetails.printCount }}</span>
                </el-col>
                <el-col style="text-align: right" :span="12">
                    <span>制单时间：</span>
                    <span class="item-info">{{ props.orderDetails.createTime }}</span>
                </el-col>
            </el-row>
            <el-row style="width: 90%; margin-top: 15px">
                <el-col :span="12">
                    <span>制单人：</span>
                    <span class="item-info">{{ props.orderDetails.createByName }}</span>
                </el-col>
                <el-col style="text-align: right" :span="12">
                    <span>交货时间：</span>
                    <span class="item-info">{{ props.orderDetails.deliveryDate }}</span>
                </el-col>
            </el-row>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" @click="onClickPrint" >打印</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { printOrderApi } from '@/api/sj/productManagement/customizedOrder';

const props = defineProps<{
    visible: boolean,
    customization_indent_tableware: any[],
    orderDetails: any,
    customers?: any[]
}>();
const emits = defineEmits(['close', 'submit']);
const printArea = ref<HTMLElement | null>(null);

const onClickPrint = async () => {
    if(printArea.value){
        // 保存当前页面的原始内容
        const originalContent = document.body.innerHTML
        // 获取要打印的内容
        const printContent = printArea.value.innerHTML

        // 替换页面内容为要打印的内容
        document.body.innerHTML = printContent

        // 调用打印
        window.print()

        // 打印后恢复原始内容
        document.body.innerHTML = originalContent
        
        const submitData = {
            id: props.orderDetails.id
        };
        await printOrderApi(submitData);

        location.reload() // 可选：刷新页面以恢复事件监听
    };
};

const handleClose = () => {
    emits('close');
};
</script>

<style lang="scss" scoped>
#pdf-content{
    display: flex;
    justify-content: center;
    flex-flow:wrap
}
.item-info{
    color: #69AFF0;
}
.order-table{
    border-spacing: 0;
    border: 1px solid black;
    width: 90%;
    font-size: 20px;
    tr{
        border: 1px solid black;
    }
    td:not(.step-col){
        border: 1px solid black;
        text-align: center;
    }
    .img-col{
        text-align: center;
        .product-image{
            height: 300px;
            
        }
        .order-numbe{
            color: #69AFF0
        }
        .code-image{
            height: 80px
        }
    }
    .table-title{
        font-weight:bolder;
    }
    .laborCost{
        display: inline-block;
        margin-left: 20px;
    }
}
</style>